<template>
 <div>
     <div class="container">
			<h1>我的相册</h1>
			<ul>
				<li>
					<img src="../components/components/img/1.jpg" class="small one" />
					<img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500" class="big  first"/>
				</li>
				<li>
					<img src="https://img1.baidu.com/it/u=4127991555,3421789262&fm=253&fmt=auto&app=138&f=JPEG?w=680&h=454" class="small" />
					<img src="https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799" class="big"/>
				</li>
				<li>
					<img src="https://img0.baidu.com/it/u=1721391133,702358773&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625" class="small" />
					<img src="https://img1.baidu.com/it/u=2930213801,3701074622&fm=253&fmt=auto&app=138&f=JPEG?w=731&h=500" class="big"/>
				</li>
				<li>
					<img src="https://img0.baidu.com/it/u=3644136588,3679797011&fm=253&fmt=auto&app=138&f=JPEG?w=725&h=500" class="small" />
					<img src="https://img1.baidu.com/it/u=101977084,1877229522&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426" class="big"/>
				</li>
			</ul>
		</div>
   <div class="container">
			<h1>我的相册</h1>
			<ul>
				<li>
					<img src="../components/components/img/1.jpg" class="small one" />
					<img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500" class="big  first"/>
				</li>
				<li>
					<img src="https://img1.baidu.com/it/u=4127991555,3421789262&fm=253&fmt=auto&app=138&f=JPEG?w=680&h=454" class="small" />
					<img src="https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799" class="big"/>
				</li>
				<li>
					<img src="https://img0.baidu.com/it/u=1721391133,702358773&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625" class="small" />
					<img src="https://img1.baidu.com/it/u=2930213801,3701074622&fm=253&fmt=auto&app=138&f=JPEG?w=731&h=500" class="big"/>
				</li>
				<li>
					<img src="https://img0.baidu.com/it/u=3644136588,3679797011&fm=253&fmt=auto&app=138&f=JPEG?w=725&h=500" class="small" />
					<img src="https://img1.baidu.com/it/u=101977084,1877229522&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426" class="big"/>
				</li>
			</ul>
		</div>

<!-- <div id="box5">
            <div id="box">
                    <img src="../components/components/img/1.jpg">
                    <img src="../components/components/img/1.png">
                    <img src="../components/components/img/2.jpg">
                    <img src="../components/components/img/3.jpg">
                    <img src="../components/components/img/4.png">
                    <img src="../components/components/img/5.png">
                    <img src="../components/components/img/6.png">
                 
         
                </div>
    </div> -->


 </div>
 
</template>

<script>
  export default {
    data() {
      return {
    
      }
    },
    methods: {
     
    },
  }
</script>
<style scoped>
.bg1{
    width: 90%;
}
	.container{
				position: relative;
				width: 353px;
				min-height: 346px;
				/*background: whitesmoke;*/
				background: palegoldenrod;
			}
			.container h1{
				color: whitesmoke;
				margin-left:20px ;
			}
			ul{
				list-style: none;/*设置列表相关内容为0*/
				float: right;
				margin-right: 20px;
				margin-bottom: 100px;
			}
			.big{
				width: 238px;
				height: 248px;
				border: 1px dashed gray;
				border-radius: 5px;
				box-shadow: 2px 2px 5px grey;
				position: absolute;
				top: 59px;
				left: 23px;
				display: none;
			}
			/*第一个big*/
			.first{
				/*z-index: 8888;*/
				display: block;
			}
			
			
			.small{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				box-shadow: 2px 2px 5px pink;/*设置阴影*/
				/*透明度*/
				opacity: 0.3;
				
			
				
			}
			.container .small:hover+.big{
				display: block;
			}
			.one{
				opacity: 1;
			}
			.container ul:hover .small{
				opacity:0.3;
			}
			.container ul li .small:hover{
				opacity:1;
			}



</style>